<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <script src='jquery-2.1.4.js'></script>
        <script type="text/javascript">
            $(function(){
                $('#selectAll').click(function(){
                    $('#checklist :checkbox').attr('checked',true);
                });
                $('#unselectAll').click(function(){
                    $('#checklist :checkbox').attr('checked',false);
                });
                $('#reverseAll').click(function(){
                    $('#checklist :checkbox').each(function(){
                        $(this).attr('checked',!$(this).attr('checked'))
                    })
                })

            })            
        </script>
    </head>
    <body>
        <div id='checklist'>
            <input type='checkbox' value='1'/>篮球
            <input type='checkbox' value='2'/>足球
            <input type='checkbox' value='3'/>羽毛球
        </div>
        <input type='button' value='全选' id='selectAll' />
        <input type='button' value='不选' id='unselectAll' />
        <input type='button' value='反选' id='reverseAll' />
    </body>
</html>